<template>
	<div class="login_container">
		<!-- 登录 -->
		<div class="login_box">
			<!-- 图片 -->
			<div class="avatar_box">
				<img src="../../assets/logo.png" alt>
			</div>
			<el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" label-width="80px">
				<!-- 用户名 -->
				<el-form-item prop="username" label="用户名">
					<el-input v-model="loginForm.username"></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password" label="密码">
					<el-input type="password" v-model="loginForm.password"></el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button @click="toRegister">注册</el-button>
					<el-button type="primary" @click="login">提交</el-button>
					<el-button type="success" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		// 对数据进行绑定
		data() {
			return {
				loginForm: {
					username: "",
					password: ""
				},
				loginRules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符之间',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符之间',
							trigger: 'blur'
						}
					]
				}
			}
		},
		mounted() {
			document.title = "登录界面"
		},
		methods: {
			toRegister() {
				this.$router.replace('/register');
			},
			resetLoginForm() {
				this.$refs.loginFormRef.resetFields();
			},
			login() {
				const _this = this;


				// if (_this.loginForm.username == "admin") {
				// 	window.sessionStorage.setItem("user", "admin");
				// 	_this.$router.push({
				// 		path: '/admin'
				// 	});
				// } else {
				// 	window.sessionStorage.setItem("user", "user");
				// 	_this.$router.push({
				// 		path: '/home'
				// 	});
				// }

				var params = new URLSearchParams();
				params.append("username", _this.loginForm.username);
				params.append("password", _this.loginForm.password);
				this.$http.post("/login", params).then(function(resp) {
					console.log(resp);
					if (resp.data.code == 404) {
						_this.$message.error(resp.data.msg);
					} else if (resp.data.code == 405) {
						_this.$message(resp.data.msg);
					} else {
						if (resp.data.data.identity == "admin") {
							window.sessionStorage.setItem("user", "admin");
							_this.$router.push({
								path: '/admin'
							});
						} else {
							console.log(resp.data.data.name);
							window.sessionStorage.setItem("user", resp.data.data.name);
							_this.$router.push({
								path: '/home'
							});
						}
					}
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	.login_container {
		background-color: #5eab71;
		height: 100%;
	}

	.login_box {
		width: 450px;
		height: 350px;
		background-color: #fff;
		border-radius: 15px; // 圆角
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		position: absolute; // 绝对定位
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%); // 根据自己位置 以自己为长度位移

		// 头像框
		.avatar_box {
			width: 130px;
			height: 130px;
			border: 1px solid #eee;
			border-radius: 50%; // 加圆角
			padding: 10px;
			box-shadow: 0 0 10px #ddd; // 盒子阴影
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #00852c;

			img {
				width: 100%;
				height: 100%;
				border-radius: 50%; // 加圆角
				background-color: #eee;
			}
		}

		.btns {
			display: flex; // 弹性布局
			justify-content: flex-end; // 尾部对齐
		}

		.login_form {
			position: absolute;
			bottom: 5%;
			width: 90%;
			padding: 10px 10px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			flex-wrap: nowrap;
		}
	}
</style>